<!-- 自定义 echart 组件 -->
<template>
  <div>
    <!-- echart -->
    <div :id="echart" :style="echartStyle" />
  </div>
</template>

<script>
export default {
  props: {
    echart: {
      type: String,
      default() {
        return 'myChart'
      }
    },
    // 样式
    echartStyle: {
      type: Object,
      default() {
        return {}
      }
    },
    // 标题文本
    titleText: {
      type: String,
      default: ''
    },
    // 提示框键名
    tooltipFormatter: {
      type: String,
      default: ''
    },
    // 扇形区域名称
    opinion: {
      type: Array,
      default() {
        return []
      }
    },
    // 提示框标题
    seriesName: {
      type: String,
      default: ''
    },
    // 扇形区域数据
    opinionData: {
      type: Array,
      default() {
        return []
      }
    }
  },
  data() {
    return {
      //
    }
  },
  mounted() {
    this.$nextTick(function() {
      this.drawPie(this.echart)
    })
  },
  methods: {
    // 监听扇形图点击
    eConsole(param) {
      // 向父组件传值
      this.$emit('currentEchartData', param.name)
    },
    // 绘制饼状图
    drawPie(id) {
      this.charts = this.$echarts.init(document.getElementById(id))
      this.charts.on('click', this.eConsole)
      this.charts.setOption({
        // title: {
        //   text: this.titleText, // 标题文本
        //   left: 'center'
        // },
        // tooltip: {
        //   trigger: 'item',
        //   formatter: '{a} <br/> ' + this.tooltipFormatter + ':{c}'
        // },
        // legend: {
        //   bottom: 20,
        //   left: 'center',
        //   data: this.opinion // 扇形区域名称
        // },
        series: [
          {
            name: this.seriesName, // 提示框标题
            type: 'pie',
            radius: ['65%', '85%'],
            center: ['50%', '50%'],
            avoidLabelOverlap: false,
            color: ['#0DA0FC', '#7F66F7', '#1CF9F8', '#9CFFFF', '#0EF4F2'],
            // backgroundColor: '#EEE',
            label: {
              show: false,
              color: '#000000', // 字体颜色
              position: 'center'
            },
            emphasis: {
              label: {
                show: false,
                fontSize: '30',
                fontWeight: 'bold'
              }
            },
            labelLine: {
              show: false
            },
            data: this.opinionData, // 数据
            itemStyle: {
              emphasis: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
              }
            }
          }
        ]
      }, window.onresize = this.charts.resize)
    }
  }
}
</script>

<style lang="scss" scoped>
  #myChart{
    width: 100%;
    position: absolute;
  }
</style>
